<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_DOM中的根组件模板</title>
</head>

<body>
    <div id="app">
        <h2>默认</h2>
    </div>

    <script type="module">
        import { createApp } from './lib/vue3.esm.browser.js'


        // 定义一个根组件
        const App = {
            data() {
                return {
                    msg: 'Hello'
                }
            },

            /**
             * 组件模板，该模板中，可以使用该组件的数据方法等内容
             * 
             * 当设置了 template 选项的时候，会已 template 做为组件的 模板内容，去覆盖挂载点的元素
             *      1. Vue3    只覆盖挂载点元素的内容
             *      2. Vue2    会整个将挂载点元素都给覆盖
             * 当没有设置 template 选项的时候，且当前组件是根组件时，会使用 根组件的 innerHTML 做为 模板内容
             * 
             * Vue2 有且仅能有一个根元素，
             * Vue3 可以有多个根元素
             */
            template: `
                <div>
                    <p>我是 P</p>
                    <p>{{ msg }}</p>
                </div>
            `
        }

        // 创建应用
        const app = createApp(App)

        setTimeout(() => {
            app.mount('#app')
        }, 500)
    </script>
</body>

</html>